<template>
	<div style="height: 100%;">
		<!-- <div class="bg bg-blur" :style="'background-image: url('+bgImg+');'"></div> -->
		<div class="card-box1">
			<div class="register-form">
				<center>
					<img :src="logoImg" class="logoImg" />
				</center>
				<div class="tab">
					<!-- <center>
						<h1 style="color: #1989FA;">信合红谷</h1>
					</center> -->
					<van-cell-group>
						<van-field class="this-input" v-model="phone" label="手机号码" placeholder="手机号码" />
					</van-cell-group>
					<van-cell-group>
						<van-field v-model="password" placeholder="密码">
							<template slot="label">
								密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码
							</template>
						</van-field>
					</van-cell-group>
					<van-cell-group>
						<van-field @keyup.enter.native="register" v-model="verificationCode" center clearable label="短信验证码" placeholder="请输入短信验证码">
							<van-button :disabled="btnIsDisabled" slot="button" size="small" type="info" @click="getVCode">{{VCodeText}}</van-button>
						</van-field>
					</van-cell-group>
					<center>
						<el-checkbox v-model="checked" class="agreement-link">
						  我已阅读并同意
						  <router-link to="/user/agreement">相关服务条款和隐私政策</router-link>
						</el-checkbox>
						<van-button :disabled="!checked" @click="register" type="info" color="linear-gradient(to right, #4bb0ff, #1989fa)" class="btn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button>
						<br />
						<p>已有账号？<router-link :to="{ name: 'index'}">去登录</router-link>
						</p>
					</center>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		validation
	} from './validate'
	import aes from '~/util/aes.js'

	export default {
		data() {
			return {
				checked:false,
				bgImg:require('~/assets/img/20191017100106.jpg'),
				activeName: "first",
				phone: "",
				password: "",
				phoneErr: false,
				pwErr: false,
				verificationCode: "",
				VCodeText: "获取验证码",
				btnIsDisabled: false,
				logoImg:require('~/assets/img/20191017101604.png')
			}
		},
		created() {
			//注册过来的则设置默认手机号码
			if (this.$route.params.phone) {
				this.phone = this.$route.params.phone;
			}
		},
		methods: {
			register() {
				let that = this;
				//效验
				let validationError = '';
				validationError = validation({
					password: that.password,
					phone: that.phone,
					verificationCode: that.verificationCode
				})
				if (validationError === '') {
					//TODO:验证通过
					that.$axios
						.post("/api/consumer/register", {
							code: that.verificationCode,
							phone: that.phone,
							password: that.password
						})
						.then(res => {
							if (res.data.code == 200) {
								that.$toast({
									message: "注册成功！",
									type: "success"
								});
								that.$router.push({
									name: "user-login",
									params: {
										phone: that.phone
									}
								});
							} else {
								that.$toast({
									message: res.data.message,
									type: "fail"
								});
							}
						});
				} else {
					that.$toast({
						message: validationError,
						type: 'fail'
					});
				}
			},
			getVCode() {
				let that = this;
				//bug：按钮设置disabled仍能触发此点击事件，所以得确定是否禁用状态
				if (!this.btnIsDisabled) {
					if ((/^1[3456789]\d{9}$/.test(that.phone))) {
						let num = 60;
						that.btnIsDisabled = true;
						let timer = setInterval(function() {
							that.VCodeText = num + "秒后可重新发送";
							num -= 1;
							if (num < 0) {
								that.VCodeText = "获取验证码";
								that.btnIsDisabled = false;
								clearInterval(timer);
							}
						}, 1000);
						that.$axios.post('/api/captcha', {
							phone: that.phone,
							type: 1
						}).then(res => {
							if (res.data.code == 200) {
								that.$toast({
									message: "验证码发送成功！",
									type: 'success'
								});
							} else {
								that.VCodeText = "获取验证码";
								that.btnIsDisabled = false;
								clearInterval(timer);
								that.$toast({
									message: res.data.message,
									type: 'fail'
								});
							}
						})
					} else {
						that.$toast({
							message: "手机号不能为空且格式不能有误",
							type: 'warning'
						});
					}
				}
			}
		},
		mounted() {
			if (this.$route.query.from) {
				this.$toast({
					message: '您还没有登录',
					type: 'warning'
				});
			}
		}
	}
</script>

<style lang="less">
	.bg {
		height: 100%;
		text-align: center;
		line-height: 100%;
	}
	
	.bg-blur {
		float: left;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center;
		// background-size: cover;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
	}
	.card-box1 {
		position: absolute;
		left: 0px;
		right: 0px;
		//background-color: #f7f7d2;
		height: 100%;
		overflow-y: hidden;
		.logoImg{
			width: 300px;
			height: 100px;
			margin: 20px;
			box-sizing: border-box;
		}

		.register-form {
			padding-top: 150px;
			width: 100%;
			
			.tab {
				font-size: 30px;
				margin: 20px 16px 0 16px;
				/*no*/
				padding-bottom: 40px;
				width: auto;
				border-radius: 2px;
				/*no*/
			}
			.agreement-link{
				margin-top: 300px;
			}
			.btn {
				width: 100%;
				margin-top: 20px;
			}
			span {
				line-height: 30px;
			}
		}
	}
</style>
